<template>
  <el-dialog
    title="批量导入"
    center
    :visible="show"
    :before-close="cancel"
    width="fit-content"
  >
    <el-select
      placeholder="请选择商户"
      v-model="dataForm.mainBusinessId"
      filterable
      clearable
      @change="handleMainBusinessChange"
    >
      <el-option
        v-for="item in businessList"
        :value="item.id"
        :label="item.name"
        :key="item.id"
      ></el-option>
    </el-select>
    <el-select
      placeholder="请选择关联商户"
      v-model="dataForm.relationBusinessIds"
      multiple
      filterable
      clearable
    >
      <el-option
        v-for="item in relationBusinessList"
        :value="item.id"
        :label="item.name"
        :key="item.id"
      ></el-option>
    </el-select>
    <el-upload
      :class="['upload', dataForm.list.length?'':'no-file']"
      action="#"
      :auto-upload="false"
      :on-change="getFile"
      accept=".xls,.xlsx"
      :show-file-list="false"
    >
      <i v-if="!dataForm.list.length" class="el-icon-plus"></i>
      <div class="excel-file" v-else>
        <img src="../../../assets/img/excel.png" alt="" />
        <div>{{ fileName }}</div>
      </div>
    </el-upload>
    <div style="margin-top:4px">
      <a
        style="color:red;text-decoration:none;"
        :href="moduleEg"
        >下载批量导入会员模板</a
      >
    </div>
    <div slot="footer">
      <el-button type="primary" @click="confirm">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import BusinessApi from "@/api/business/business";
import importExcel from "@/excel/importExcel";
import { cloneDeep } from "lodash-es";
import {BUSINESS_MEMBER_IMPORT} from "@/constants/constants"
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      dataForm: {
        mainBusinessId: "",
        relationBusinessIds: [],
        list: [],
       
      },
      moduleEg:BUSINESS_MEMBER_IMPORT,
      fileName: "",
      businessList: [],
      allowMonthSettle: 0, //是否支持月结
      relationBusinessList: []
    };
  },
  watch: {
    show(val) {
      const businessList = this.businessList;
      !val && Object.assign(this.$data, this.$options.data());
      this.businessList = businessList;
    }
  },
  async mounted() {
    let { data } = await BusinessApi.listIdNameVo();
    this.businessList = data || [];
  },
  methods: {
    async handleMainBusinessChange(val) {
      const {
        dataForm: { mainBusinessId },
        businessList
      } = this;
      this.relationBusinessList = [];
      this.allowMonthSettle = "";
      if (!mainBusinessId) return;
      this.allowMonthSettle = businessList.find(
        item => item.id == mainBusinessId
      ).allowMonthSettle;
      let { data } = await BusinessApi.listRelationBusiness({
        businessId: mainBusinessId
      });
      this.relationBusinessList = data || [];
    },
    getFile(file) {
      this.fileName = file.name;
      importExcel(file, 0, [
        "memberName",
        "memberCode",
        "phone",
        "balance",
        "allowMonthSettle"
      ]).then(res => {
        this.dataForm.list = res;
      });
    },
    async confirm() {
      let {
        dataForm: { mainBusinessId, list, relationBusinessIds },
        allowMonthSettle
      } = this;
      if (!mainBusinessId) return this.$message.error("请选择商户");
      if (!list.length) return this.$message.error("请选择一个文件");
      if (!allowMonthSettle) {
        // 如果选中的主商户没有设置线下月结就需要把线下月结全部设置为0
        list = cloneDeep(list);
        list.forEach(item => (item.allowMonthSettle = 0));
      }
      const params = {
        mainBusinessId,
        list,
        relationBusinessIds
      };
      await this.$confirm("确定提交", "提示", {});
      await BusinessApi.batchAddMember(params);
      this.$Utils.notifySuccess("上传成功");
      this.cancel();
      this.$emit("confirm");
    },
    cancel() {
      this.$emit("update:show", false);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 100px 200px;

  .el-select {
    display: block;
    width: 500px;
    margin-bottom: 20px;
  }
  .upload {
    .el-icon-plus {
      font-size: 30px;
    }
    .excel-file {
      text-align: center;
      img {
        width: 100px;
      }
    }
  }
  .no-file {
    .el-upload {
      height: 150px;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border: 1px rgb(160, 160, 160) dashed;
      border-radius: 4px;
      &:hover {
        border-color: black;
      }
    }
  }
}
</style>
